<template>
  <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="cart-list">
    <van-row v-for="cart of cartList">
      <van-col span="3" class="check-wrapper">
        <van-checkbox v-model="cart.isChecked" icon-size="24px" @change="handleCheckedAllStatus">

        </van-checkbox>
      </van-col>
      <van-col span="4">
        <van-image
            width="50px"
            height="50px"
            fit="fill"
            :src="cart.foodMainImage"
        />
      </van-col>
      <van-col span="11">
        <div class="name">{{ cart.foodName }}</div>
        <div class="price">￥{{cart.foodPrice}}</div>
      </van-col>
      <van-col span="6" class="count-wrapper">
        <van-stepper v-model="cart.quantity" :name= "cart.id" theme="round" button-size="22" disable-input
        @change="handleQuantityChange"/>
      </van-col>
    </van-row>
    <van-submit-bar :price="totalPrice" button-text="结算" @submit="onSubmit">
      <van-checkbox v-model="isCheckedAll" @change="handleAllInChange">全选</van-checkbox>
      <template #tip>
        <span @click="onClickLink">用餐愉快，欢迎下次光临，嘻嘻</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {showDialog} from 'vant'
import {showToast} from 'vant'
import {handleError} from "vue";
export default {
  name: "list",
  setup(){
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    }
  },
  data() {
    return {
      isCheckedAll: '',
      cartList: []
    }
  },
  computed: {
    totalPrice() {
      let num = 0;
      for (let cart of this.cartList) {
        num += cart.foodPrice * cart.quantity;
      }
      return num * 100;
    }
  },
  methods: {
    handleError,
    _initCartList(){
      this.$axios.get('/ele_server/cart/list').then(({data: res}) =>{
        if (res.status == 0) {
          this.cartList = res.data
        } else if (res.status == 3003) {
          showDialog({
            title: '提示',
            message: '当前未登录',
            theme: 'round-button',
            confirmButtonText: '去登录'
          }).then(() => {
            this.$router.push('/user/login?redirect=/cart/list');
          });
        }else {

        }
      })
    },
    handleQuantityChange(quantity,obj){
      this.$axios.get(`/ele_server/cart/updateQuantity?id=${obj.name}&quantity=${quantity}`).then(({data: res}) => {
        if (res.status == 0) {
          showToast('数量修改成功');
        }
      })
    },
    handleAllInChange(checked) {
      for (let cart of this.cartList) {
        cart.isChecked = checked
      }
    },
    handleCheckedAllStatus() {
      let count = 0;
      for (let cart of this.cartList) {
        if (cart.isChecked) {
          count++
        }
      }

      if (count == this.cartList.length) {
        this.isCheckedAll = true;
      } else {
        this.isCheckedAll = false;
      }

    },
    onSubmit() {
      // 判断选择了几个
      let checkedCartList = []
      for (let cart of this.cartList) {
        if (cart.isChecked) {
          checkedCartList.push(cart);
        }
      }
      if (checkedCartList.length != 0) {
        // 将选中数据存入vuex中
        // this.$store.commit('setCheckedCartList', checkedCartList)
        localStorage.setItem('setCheckedCartList', JSON.stringify(checkedCartList))
        this.$router.push('/order/confirm');
      } else {
        showToast('请至少选择一条')
      }
    }
  },
  created() {
    this._initCartList()
  }

}

</script>


<style scoped lang="stylus">
.cart-list
  .van-row
    margin 10px 0
    .check-wrapper,.count-wrapper
      display flex
      justify-content center
      align-items center




</style>